<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id = "app-7">
        <ol>
            <!--现在我们为每个todo-item提供待办对象
                待办对象是变量，即内容可以是动态的。
                我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释
            -->
            <todo-item v-for = "item in groceryList" v-bind:todo = "item" v-bind:key = "item.id">
            </todo-item>
        </ol>
    </div>
<script>
    Vue.component("todo-item",{
        props:['todo'],
        template:"<li>{{todo.text}}</li>"
    })
    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: [
                { id: 0, text: '蔬菜' },
                { id: 1, text: '奶酪' },
                { id: 2, text: '随便其他什么人吃的东西' }
            ]
        }
    })
</script>
</body>
</html>